<template>
  <div class="wrapper-container-filter">
    <div class="title">程序走向练习</div>
    <div class="container-filter">
      <el-form size="large" label-width="40px">
        <el-form-item label="机场">
          <el-checkbox-group v-model="filter.airport">
            <el-checkbox value="ZUUU">ZUUU</el-checkbox>
            <el-checkbox value="ZUTF">ZUTF</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="类型">
          <el-checkbox-group v-model="filter.type">
            <el-checkbox value="SID">SID</el-checkbox>
            <el-checkbox value="STAR">STAR</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="方向">
          <el-checkbox-group v-model="filter.direction">
            <el-checkbox value="N">N</el-checkbox>
            <el-checkbox value="S">S</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="属性">
          <el-checkbox-group v-model="filter.attrib">
            <el-checkbox value="">一般程序</el-checkbox>
            <el-checkbox value="PMS">PMS</el-checkbox>
            <el-checkbox value="CCO">CCO</el-checkbox>
            <el-checkbox value="CDO">CDO</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="container-button">
      <el-button
        type="primary"
        style="width: 50%"
        size="large"
        @click="doFilter"
        >开始</el-button
      >
      <el-button
        type="primary"
        text
        style="width: 50%"
        size="large"
        @click="doBack"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

const filter = ref({
  airport: ["ZUUU", "ZUTF"],
  type: ["SID", "STAR"],
  direction: ["N", "S"],
  attrib: ["", "PMS", "CCO", "CDO"],
});

const emits = defineEmits(["do"]);

const doFilter = () => {
  emits("do", filter.value);
};

const doBack = () => {
  // TODO: Navigate back to previous page
  router.back();
};
</script>

<style scoped>
.wrapper-container-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 24px;
}

.wrapper-container-filter > * {
  margin-bottom: 20px;
}

.title {
  font-size: 36px;
  color: #aaa;
  font-weight: bold;
  padding-bottom: 20px;
}

.container-filter {
  width: calc(min(100vh, 100%) - 40px);
  border-radius: 24px;
  border: 1px solid var(--el-color-info-light-3);
  padding: 24px;
  text-align: justify;
  background-color: #fff1;
}

.container-button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-button > *:not(:last-child) {
  margin-bottom: 20px;
}
</style>
